<!DOCTYPE html>
<html>
  <head>
    <title>选择题</title>
    <style>
      body {
        padding: 0 100px;
      }
      div {
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <h1>选择题</h1>
    <main id="main"></main>

    <button onclick="submitAnswers()">提交答案</button>
    <p id="score"></p>

    <script>
      const list = [
        {
          id: '001',
          titile: '在下列哪个选项中，typeof 返回的值为 "object"？',
          options: [
            { op: 'A', value: 'null' },
            { op: 'B', value: 'undefined' },
            { op: 'C', value: 'function' },
            { op: 'D', value: 'string' },
          ],
        },
        {
          id: '002',
          titile: '下列哪个方法可以用于删除一个对象的属性？',
          options: [
            { op: 'A', value: 'object.remove(property)' },
            { op: 'B', value: 'object.delete(property)' },
            { op: 'C', value: 'delete object.property' },
            { op: 'D', value: 'object.pop(property)' },
          ],
        },
        {
          id: '003',
          titile: '下列哪个方法可以用于在数组的末尾添加一个新元素？',
          options: [
            { op: 'A', value: 'array.add(newElement)' },
            { op: 'B', value: 'array.insert(newElement)' },
            { op: 'C', value: 'array.push(newElement)' },
            { op: 'D', value: 'array.unshift(newElement)' },
          ],
        },
      ]
      const answer = {
        '001': 'A',
        '002': 'C',
        '003': 'C',
      }
      const chooseQ = list.map((item) => {
        // console.log(item.options)
        return `
          <div>${item.id}.${item.titile}</div>
         <div> ${item.options
           .map((item2) => {
             return `
                    <input type="radio" name="${item.id}"  value="${item2.op}">
                    <label for="${item2.op}+${item.id}">${item2.op}.</label>
                    <span class="contain">${item2.value}</span>
                    `
           })
           .join('')} </div>

          `
      })
      document.querySelector('#main').innerHTML = chooseQ.join('')

      let sumScore = 0
      document.querySelector('#main').onclick = function (e) {
        if (e.target.value === answer[e.target.name] && e.target.checked) {
          sumScore += 10
        }
      }
      function submitAnswers() {
        document.querySelector('#score').innerHTML = `
      您的得分是${sumScore}分，共30分。
      `
        sumScore = 0
        document.querySelector('#main').innerHTML = chooseQ.join('')
      }
    </script>
  </body>
</html>
